<template>
    <div class="content">
        <el-dialog title="SQL执行" :close-on-click-modal="false" :visible.sync="visible" width="70%">
            <el-form ref="form" :model="form" label-width="auto">
                <el-form-item label="命名空间">
                    <el-input v-model="form.ns" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="数据源名称">
                    <el-input v-model="form.ds" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="Mapper名称空间">
                    <el-input v-model="form.mns" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="SQL类型">
                    <el-input v-model="form.sqlType" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="SQL标识">
                    <el-input v-model="form.sqlId" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="SQL语句">
                    <el-input type="textarea" autosize="{ minRows: 1 maxRows: 100}" :value="form.sqlXml"></el-input>
                </el-form-item>
                <el-form-item label="返回值类型">
                    <el-select v-model="form.sqlResponseMapper" clearable placeholder="请选择">
                        <el-option v-for="(item, index) in sqlResponseMappers" :key="index" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-show="form.sqlResponseMapper == 'PAGE'" label="页码">
                    <el-input v-model="form.page"></el-input>
                </el-form-item>
                <el-form-item v-show="form.sqlResponseMapper == 'PAGE'" label="条数">
                    <el-input v-model="form.limit"></el-input>
                </el-form-item>
                <el-form-item label="params">
                    <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 100}" v-model.trim="form.params" @blur="isJson(form.params)"></el-input>
                </el-form-item>
                <el-form-item label="return">
                    <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 100}" v-model="form.data"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button icon="el-icon-search" @click="handleSumbit">执行SQL</el-button>
                    <el-button icon="el-icon-error" @click="handleClear">清空</el-button>
                    <el-button icon="el-icon-error" @click="visible = false">返回</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
    import { sqlExec, sqlInfo } from '../../api/sql'

    export default {
        data() {
            return {
                visible: false,
                sqlResponseMappers: ['MAP', 'MAP_LIST', 'PAGE'],
                form: {
                    ns: '',
                    ds: '',
                    mns: '',
                    sqlType: '',
                    sqlId: '',
                    sqlXml: '',
                    sqlResponseMapper: 'MAP_LIST',
                    params: '{}',
                    page: 1,
                    limit: 10,
                    data: '{}'
                }
            }
        },
        methods: {
            init(ns, ds, mns, sqlId) {
                this.form = {
                    ns: '',
                    ds: '',
                    mns: '',
                    sqlType: '',
                    sqlId: '',
                    sqlXml: '',
                    sqlResponseMapper: 'MAP_LIST',
                    params: '{}',
                    page: null,
                    limit: null,
                    data: '{}'
                }
                this.form.ns = ns || 'public'
                this.form.ds = ds || ''
                this.form.mns = mns || ''
                this.form.sqlId = sqlId || ''
                this.visible = true
                this.$nextTick(() => {
                    this.$refs.form.resetFields()
                    sqlInfo(this.form.ns, this.form.ds, this.form.mns, this.form.sqlId).then(res => {
                        this.form = res.data
                    })

                })
            },
            handleClear() {
                this.form.data = '{}'
                this.$forceUpdate()
            },
            isJson(str) {
                if (str) {
                    if (typeof str === 'string') {
                        try {
                            var obj = JSON.parse(str)
                            if (typeof obj === 'object' && obj) {
                                return true
                            } else {
                                this.$message.error('请检查参数的是否为JSON格式')
                            }
                        } catch (e) {
                            this.$message.error('请检查参数的是否为JSON格式')
                        }
                    }
                }
            },
            handleSumbit() {
                this.form.data = ''
                if (this.form.sqlResponseMapper != 'PAGE') {
                    this.form.page = 1
                    this.form.limit = 10
                }
                this.isJson(this.form.params)
                let submitform = {
                    ns: this.form.ns,
                    ds: this.form.ds,
                    mns: this.form.mns,
                    sqlId: this.form.sqlId,
                    page: this.form.page,
                    limit: this.form.limit,
                    sqlResponseMapper: this.form.sqlResponseMapper,
                    params: this.form.params === undefined || this.form.params === '' || this.form.params === null ? {} : JSON.parse(this.form.params)
                }
                sqlExec(submitform).then((res) => {
                    this.form.data = window.JSON.stringify(res.data, null, 4)
                    this.$forceUpdate()
                })
            }
        }
    }
</script>
<style scoped>
.content {
    margin: 20px 0px;
    font-size: 1em;
}
.el-row {
    margin-bottom: 20px;
    line-height: 10px;
}
.el-select,
.el-input {
    width: 440px;
}
.el-form-item__label-wrap {
    margin-left: 0px !important;
}
.el-form-item {
    margin: 20px 0px;
    font-weight: bold;
    text-align: left;
}

</style>
